<template>
    <div class="mail-detail">
        <!-- <top-bar :isBlack="true" title="通讯录"></top-bar> -->
        <van-search v-model="search" @search="handelSearch" placeholder="请输入酒店或用户" />
        <div class="list-wrapper" v-if="searchList.length || searchHList.length">
            <div v-for="item in searchHList" :key="item.id">
                <div v-if="item.id != 2" class="list-item" @click="handleSelect(item)">
                    <img class="item-icon" src="@/assets/icon_01.png" alt="" />
                    <p class="item-title">{{ item.cn_title }}</p>
                </div>
            </div>
        </div>
        <div v-if="searchList.length || searchHList.length" class="people-list-wrapper">
            <div v-for="user in searchList" :key="user.id" class="people-item" @click="goUserInfo(user)">
                <img class="item-icon" :src="user.avatar" alt="" />
                <div class="item-info">
                    <p class="item-name">{{ user.name }}</p>
                    <p class="item-job">职位:{{ user.eu_job }}</p>
                </div>
            </div>
        </div>
        <template v-else>
            <div v-if="memberCount" class="people-list-wrapper">
                <van-index-bar
                    highlight-color="#224448"
                    :index-list="indexList"
                    :sticky-offset-top="44"
                    :sticky="false"
                >
                    <div v-for="item in memberList" :key="item.inital">
                        <van-index-anchor :index="item.inital">{{ item.inital }}</van-index-anchor>
                        <div v-if="item.inital == '#'" class="list-wrapper">
                            <div v-for="user in item.list" :key="user.id" class="list-item" @click="handleSelect(user)">
                                <img class="item-icon" src="@/assets/icon_01.png" alt="" />
                                <p class="item-title">{{ user.cn_title }}</p>
                            </div>
                        </div>
                        <div v-else>
                            <div v-for="user in item.list" :key="user.id" class="people-item" @click="goUserInfo(user)">
                                <img class="item-icon" :src="user.avatar" alt="" />
                                <div class="item-info">
                                    <p class="item-name">{{ user.name }}</p>
                                    <p class="item-job">职位:{{ user.eu_job }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-index-bar>
            </div>
            <div class="list-wrapper" v-else>
                <div v-for="item in list" :key="item.id">
                    <div v-if="isHidden(item)" class="list-item" @click="handleSelect(item)">
                        <img class="item-icon" src="@/assets/icon_01.png" alt="" />
                        <p class="item-title">{{ item.cn_title }}</p>
                    </div>
                </div>
            </div>
        </template>
        <div class="btn-wrapper" v-show="btnShow">
            <van-button color="#224448" block @click="goMail">返回首页</van-button>
        </div>
    </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import TopBar from "@/components/topBar.vue";
export default {
    name: "mailDetail",
    data() {
        return {
            search: "",
            list: [],
            indexList: [],
            memberList: [],
            memberCount: 0,
            searchList: [],
            searchHList: [],
            screeHeight: window.innerHeight,
            docmHeight: document.documentElement.clientHeight, //默认屏幕高度
            showHeight: document.documentElement.clientHeight, //实时屏幕高度
            btnShow: true,
        };
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.showHeight = document.documentElement.clientHeight;
            })();
        };
    },
    watch: {
        $route: {
            handler: function() {
                this.departments();
            },
            immediate: true,
        },
        showHeight() {
            if (this.docmHeight > this.showHeight) {
                this.btnShow = false;
            } else {
                this.btnShow = true;
            }
        },
    },
    methods: {
        isHidden(val) {
            if (
                val.cn_title == "房务部" ||
                val.cn_title == "餐饮部" ||
                val.cn_title == "工程部" ||
                val.cn_title == "财务部" ||
                val.cn_title == "人力资源部" ||
                val.cn_title == "信息技术部" ||
                val.cn_title == "安保部"
            ) {
                return false;
            }
            return true;
        },
        departments() {
            Toast.loading({
                message: "加载中...",
                forbidClick: true,
                duration: 0,
            });
            this.$api
                .departments({
                    parentid: this.$route.params.id,
                })
                .then((res) => {
                    Toast.clear();
                    if (res.status_code == 200) {
                        this.memberCount = res.data.member_count;
                        this.list = res.data.department_data;
                        this.memberList = res.data.a_z_list;
                        this.indexList = res.data.index_list;
                    } else {
                        Dialog({ message: res.message });
                    }
                });
        },
        handelSearch(val) {
            if (!val) {
                this.searchList = [];
                this.searchHList = [];
            } else {
                Toast.loading({
                    message: "搜索中...",
                    forbidClick: true,
                    duration: 0,
                });
                this.$api.member({ key: val }).then((res) => {
                    Toast.clear();
                    if (res.status_code == 200) {
                        this.searchList = res.data.lists1;
                        this.searchHList = res.data.lists2;
                    }
                });
            }
        },
        goMail() {
            this.$router.replace({
                path: "/mail",
            });
        },
        handleSelect(val) {
            this.search = "";
            this.searchList = [];
            this.searchHList = [];
            this.$router.push({
                path: `/mailDetail/${val.id}`,
            });
        },
        goUserInfo(val) {
            this.$router.push({
                path: "/userInfo",
                query: {
                    user: JSON.stringify(val),
                },
            });
        },
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == "mail" || to.name == "mailDetail") {
            this.search = "";
            this.searchList = [];
        }
        next();
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.mail-detail {
    .van-search__content {
        background-color: #f4f4f4;
    }

    .van-search {
        padding: 18px 15px;

        .van-cell {
            padding: 8px 8px 8px 0;
        }
    }

    .van-button {
        height: 54px;
    }

    .van-button--normal {
        font-size: 16px;
    }

    .van-index-anchor {
        color: #999999;
    }

    .van-index-bar__index--active {
        color: #fff !important;
        position: relative;
        width: 18px;
        height: 18px;
        background-color: #224448;
        border-radius: 50%;
        padding: 0;
        margin-left: 12px;
        line-height: 18px;
    }
}
</style>
<style lang="scss" scoped>
.mail-detail {
    height: 100vh;
    z-index: 9;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding-bottom: 56px;

    .list-wrapper {
        padding: 0 15px;

        .list-item {
            display: flex;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid #f4f4f4;

            .item-icon {
                width: 40px;
                height: 40px;
                margin-right: 20px;
            }

            .item-title {
                font-size: 14px;
                font-weight: bold;
                color: #333333;
            }
        }
    }

    .people-list-wrapper {
        .people-item {
            margin: 0 15px;
            display: flex;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid #f4f4f4;

            img.item-icon {
                width: 40px;
                height: 40px;
                margin-right: 20px;
                border-radius: 10px;
            }

            .item-info {
                line-height: 1;

                .item-name {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom: 14px;
                }

                .item-job {
                    font-size: 13px;
                    color: #666666;
                }
            }
        }
    }

    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 750px) {
    .mail-detail {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);
        .people-list-wrapper {
            .people-item {
                .item-info {
                    .item-name {
                        font-size: 20px !important;
                    }
                    .item-job {
                        font-size: 18px !important;
                    }
                }
            }
        }

        .list-wrapper {
            .list-item {
                .item-title {
                    font-size: 20px !important;
                }
            }
        }
    }
}
</style>
